
function showWalletCrombs(){
	crombs = getCrombs();
	var cards = new Array(crombs.length);
	cards.index=0;
	for (var i = 0;i<crombs.length;i++){
	  cards[i] = new Card(new CrombRenderer(crombs[i]));
	}
	if ($("#wallet").length > 0){
	   $("#wallet").remove();
	}
	var wallet = new Wallet("wallet",cards,"Crombs");
	wallet.init();
}
function showWalletCrombForm(){
	var cards = new Array(1);
	cards.index=0;
	cards[0] = new Card(new CrombFormRenderer());
	if ($("#wallet").length > 0){
	   $("#wallet").remove();
	}
	var wallet = new Wallet("wallet",cards,"Leave Cromb");
	wallet.init();
	$("#submitCromb").click(submitCromb);
	
}
function submitCromb(){
   var author = $("#crombAuthor").val();
   var message = $("#crombMessage").val();
   putCromb(author,message);
   setCookie("signature",authour,365);
   setTimeout(showWalletCrombs,0);
}
function showWalletHelp(){
  var cards = new Array(2);
  cards.index=0;
  cards[0] = new Card(new HelpPage1Renderer());
  cards[1] = new Card(new HelpPage2Renderer());
  if ($("#wallet").length > 0){
    $("#wallet").remove();
  }
  var wallet = new Wallet("wallet",cards,"Help");
  wallet.init();
}
function showWalletGPSInfo(){
  var cards = new Array(1);
  cards.index=0;
  cards[0] = new Card(new GPSInfoRenderer());
  if ($("#wallet").length > 0){
    $("#wallet").remove();
  }
  var wallet = new Wallet("wallet",cards,"GPS Info");
  wallet.init();
}

function CrombFormRenderer(){
  function render(){
     var author = getCookie("signature");
	 if (author === null){
	    author = "Anonymous";
	 }
     return "<div class='cromb'><textarea id='crombMessage' maxlength=500 cols=30 rows=8></textarea><br><input id='crombAuthor' type=text maxlength=50 value='"+author+"'><br><input id='submitCromb' type=button value='Leave...'</div>";
  }
  this.render = render;

}

function CrombRenderer(cromb){
  this.cromb = cromb;
  function render(){
     cromb = this.cromb;
     return "<div class='cromb'>"+cromb.message+"<div class='signature'>"+cromb.author+"</div><div class='datetime'>"+cromb.datetime+"</div></div>";
  }
  this.render = render;
}

function GPSInfoRenderer(){
  function render(){
	var html = "<p>This is your current info</p>";
    html += "<li>Longitude: "+gpsLongitude + "</li>";
    html += "<li>Latitude: "+gpsLatitude + "</li>";
    html += "<li>Accuracy: "+gpsAccuracy + "</li>";
    html += "<li>Heading: "+gpsHeading + "</li>";
    html += "<li>Altitude: "+gpsAltitude + "</li>";
    html += "<li>Alt Accuracy: "+gpsAltitudeAccuracy + "</li>";
    html += "<li>Speed: "+gpsSpeed + "</li>";
    html += "<li>Heading: "+gpsHeading+"</li>";
	return html;
  }
  this.render = render;
}
function HelpPage1Renderer(){
  function render(){
	var html = "<p>Welcome to Crombs!</p>";
    html += "<li>Post: Leave a cromb at your current position</li>";
    html += "<li>Compass: Shows your current GPS Info</li>";
    html += "<li>Accuracy (%): Shows your if your position is accurate</li>";
	html += "<li>Display: Swipe left/right to see more...</li>";
    return html;
  }
  this.render = render;
}
function HelpPage2Renderer(){
  function render(){
	var html = "<p>Welcome to Crombs!</p>";
    html += "<li>Locked: When displayed, your GPS position is stable</li>";
    html += "<li>Crombs Counter: How many crombs are at your current position";
    html += "<li>Distance: The distance to the closest crombs</li>";
	return html;
  }
  this.render = render;
}

function Card(renderer){
  this.renderer = renderer;
  function display(){
     $("#wallet").append("<div id='card' class='card'>"+renderer.render()+"</div>");
  }
  this.display = display;
  
}

function Wallet(id,cards,title){
  this.cards = cards;
  this.cards.index = 0;
  this.title = title;
  this.startXTouch = 0;
  function ontouchstart(e){
    startXTouch = e.originalEvent.touches[0].pageX;
  }
  this.ontouchstart = ontouchstart;
  function ontouchend(e){
    var delta = startXTouch - e.originalEvent.changedTouches[0].pageX;
	if ($("#walletnext").length > 0){
      if (delta > 100){
	    next();
	  }
	}
	if ($("#walletprevious").length > 0){
	 if (delta < -100){
	   previous();
	 }
	}
  }
  this.ontouchend = ontouchend;
  
  function init(){
     
     $("#mainview").append("<div id='wallet'><div id='wallettitle2' class='wallettitle2'></div><div id='wallettitle' class='wallettitle'>"+title+"</div></div>");
	 card = cards[cards.index];
	 if (cards.length > 1){
	   displayNext();
	 }
	 var height = $(document).height() - $("#header").outerHeight()-$("#ads").outerHeight()-20;
	 $("#wallet").css({height:height}); 
	 $("#wallet").on('touchstart', ontouchstart);
	 $("#wallet").on('touchend', ontouchend);
	 card.display();
	 
  }
  this.init = init;
  function next(){
    console.log("Move next...");
 	if (cards.index < cards.length-1){
	  cards.index++;
	}
	if($("#walletprevious").length=== 0){
	  displayPrevious();
	}
	$("#card").remove();
	card = cards[cards.index];
	card.display();
	$('#card').css('transform', 'translate(450px, 0px) rotate(90deg)');
    setTimeout(function(){$('#card').css('transform', 'translate(0px, 0px) rotate(0deg)');},0);
	if (cards.index >= cards.length-1){
	  $("#walletnext").remove();
	}
  }
  function previous(){
    console.log("Move previous...");
    if (cards.index > 0){
	  cards.index--;
	}
	if($("#walletprevious").length> 0 && cards.index===0){
	  $("#walletprevious").remove();
	}
	$("#card").remove();
	card = cards[cards.index];
	card.display();
	$('#card').css('transform', 'translate(-400px, 0px) rotate(-90deg)');
    setTimeout(function(){$('#card').css('transform', 'translate(0px, 0px) rotate(0deg)');},0);

	if($("#walletnext").length=== 0 && cards.length>0){
	  displayNext();
	}
  }
  this.next = next;
  this.previous = previous;
  
  function displayNext(){
    $("#wallettitle2").append("<div id='walletnext' class='walletnext'>Next</div>");
	$("#walletnext").click(next);
  }
  function displayPrevious(){
    $("#wallettitle2").append("<div id='walletprevious' class='walletprevious'>Previous</div>");
	$("#walletprevious").click(previous);
  }
  this.displayNext = displayNext;
  this.displayPrevious = displayPrevious;
  
  
}